<template>
	<view class="contain">
		<view>
			<view class="from-list">
				<u--form labelPosition="left" :model="realForm.data" :rules="realForm.rule" ref="realFormRef">
					<u-form-item v-if="data.status != 1" label="身份证正面" borderBottom labelWidth="90">
						<image @click="uploadIdcard(1)" class="idcardImg"
							:src="idcard.id_card_img_f.url?idcard.id_card_img_f.url:'/static/images/idcardz.png'">
						</image>
					</u-form-item>
					<u-form-item v-if="data.status != 1" label="身份证背面" labelWidth="90">
						<image @click="uploadIdcard(2)" class="idcardImg"
							:src="idcard.id_card_img_b.url?idcard.id_card_img_b.url:'/static/images/idcardf.png'">
						</image>
					</u-form-item>
					<u-form-item label="姓名" labelWidth="70" prop="name" borderBottom>
						<u--input :readonly="data.status==1" v-model="realForm.data.name" border="none"
							placeholder="请选择姓名"></u--input>
					</u-form-item>
					<u-form-item labelWidth="70" label="身份证号" prop="id_no" borderBottom>
						<u--input :readonly="data.status==1" v-model="realForm.data.id_no" border="none"
							placeholder="请输入身份证号"></u--input>
					</u-form-item>
					<u-form-item label="手机号" prop="mobile_no" borderBottom labelWidth="70">
						<u--input readonly v-model="realForm.data.mobile_no" border="none" placeholder="请输入手机号"
							maxlength='11'></u--input>
					</u-form-item>
					<u-form-item
						v-if="data.status != 1 || (data.face_status != 'SUCCESS' &&  data.system_face_status == 1)"
						label="验证码" labelWidth="70" prop="code" borderBottom>
						<u-input v-model="realForm.data.code" border="none" maxlength='6' type='number'
							placeholder="请输入验证码"></u-input>
						<template v-slot:right>
							<view @click="sendSms">
								<sms ref="smsC"></sms>
							</view>
						</template>
					</u-form-item>
					<view class="pass-tip">注：身份信息自动识别，如识别有误，请修正。</view>
				</u--form>
				<view class="flex button" style="margin-top: 100rpx;"
					v-if="data.status != 1 || (data.face_status != 'SUCCESS' &&  data.system_face_status == 1)">
					<u-button type="primary" :text="data.system_face_status == 1 ? '人脸验证':'实名认证'" class="custom-style"
						@click="realForm.submit"></u-button>
				</view>
				<view class="flex button" style="margin-top: 150rpx;"
					v-if=" (data.status == 1 && data.system_face_status != 1) || (data.status == 1 && data.face_status == 'SUCCESS' &&  data.system_face_status == 1)">
					<u-button type="primary" text="已认证通过" class="custom-style"></u-button>
				</view>
			</view>
		</view>
		<!-- <view v-else class="success">
       <image src="../../../static/images/success.png"></image>
       <text>已完成实人认证</text>
     </view> -->
	</view>
	<view style="height: 50rpx;"></view>
	<agreement ref="agreementRef"></agreement>
	<view style="height: 50rpx;"></view>
</template>
<script setup>
	import agreement from "@/components/agreement.vue"
	import {
		certification,
		face,
		getMemberCertification,
		getCertificationInfo,
		memberInfo,
		systemSetting
	} from "../../../../api/module/mine.js"
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive
	} from 'vue';
	import {
		sms
	} from '@/components/sms.vue'
	import {
		upload,
		goNav,
		idCardRegular,
		mobileRegular,
		msg,
	} from "../../../../utils/common";
	import {
		idcardOcr
	} from "../../../../utils/idcardOcr.js";
	import {
		customStyle,
		customStyle1
	} from "../../../../utils/style";
	const data = reactive({
		status: 2,
		face_status: 'ING',
		system_face_status: 2,
	})
	const agreementRef = ref()
	const smsC = ref();
	const realFormRef = ref(null);
	const idcard = reactive({
		id_card_img_f: {},
		id_card_img_b: {},
	})
	const realForm = reactive({
		data: {
			name: '',
			id_no: '',
			id_no_secret: '',
			mobile_no: '',
			mobile_no_secret: '',
			code: '',
			id_card_img_f: [],
			id_card_img_b: [],
		},
		rule: {
			name: [{
				required: true,
				message: '请输入姓名',
				trigger: 'change'
			}, {
				min: 2,
				max: 20,
				message: '姓名长度为2-20个字符之间',
				trigger: 'change'
			}, ],
			id_no: [{
				required: true,
				message: '请输入身份证号',
				trigger: 'change'
			}, {
				pattern: idCardRegular,
				message: '身份证号格式不正确',
				trigger: 'change'
			}],
			mobile_no: [{
				required: true,
				message: '请输入手机号',
				trigger: 'change'
			}, {
				pattern: mobileRegular,
				message: '手机号格式不正确',
				trigger: 'change'
			}],
			code: [{
				required: true,
				message: '请输入验证码',
				trigger: 'change'
			}]
		},
		/**
		 * 人脸识别地址跳转
		 */
		face: function() {
			// if (data.system_face_status != 1) {
			//   return true;
			// }
			// face({}).then(res => {
			//   const _url = '/pages/my/person/Realname/face?flow_id=' + res.flow_id + '&url=' + encodeURIComponent(res.auth_url);
			//   goNav(_url);
			// });
		},
		submit: function() {
			realFormRef.value.validate().then(validate => {
				if (validate) {
					if (!idcard.id_card_img_f.url) {
						msg('请上传身份证正面照片');
						return;
					}
					if (!idcard.id_card_img_b.url) {
						msg('请上传身份证背面照片');
						return;
					}
					if (!agreementRef.value.checkFn()) {
						msg('请同意服务协议和隐私政策');
						return;
					}
					realForm.data.id_card_img_f = [idcard.id_card_img_f.id]
					realForm.data.id_card_img_b = [idcard.id_card_img_b.id]
					console.log(realForm.data);
					// return;
					if (data.status != 1) {
						certification(realForm.data).then(res => {
							if (res) {
								data.status = res.status;
								getCertification();
							}
							if (res.status == 1) {
								realForm.face();
							}
						});
						return;
					}
					realForm.face();
				}
			});
		},
	});
	const sendSms = () => {
		smsC.value.send({
			phone: realForm.data.mobile_no,
			type: "certification",
		})
	}
	onLoad(() => {
		// getCertification();
		// getSystemSetting();
	});
	onShow(() => {
		getCertification();
		getSystemSetting();
	})
	const getSystemSetting = () => {
		systemSetting().then(res => {
			data.system_face_status = res.face_status;
		});
	}
	const getCertification = () => {
		getCertificationInfo().then(res => {
			data.member_id = res.member.id || 0;
			var member = res.member;
			var certification = res.member.member_certification;
			if (certification) {
				data.status = certification.status || 2;
				data.face_status = certification.face_status || 'ING';
				if (certification.name) {
					realForm.data.name = certification.name || '';
				}
				if (certification.id_no) {
					realForm.data.id_no = data.status == 1 ? certification.id_no_secret : certification.id_no;
				}
			}
			realForm.data.mobile_no = data.status == 1 ? member.cellphone_secret : member.cellphone;
		})
	}
	//图片上传
	const uploadIdcard = (type) => {
		uni.chooseMedia({
			count: 1,
			mediaType: ['image'],
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (tempFilePaths) => {
				const tempFilePath = tempFilePaths.tempFiles[0];
				const tempPath = tempFilePath['tempFilePath'];
				const tempNameArr = tempPath.split('/');
				const tempName = tempNameArr[tempNameArr.length - 1];
				const tempArr = tempName.split('.');
				const tempExt = tempArr[tempArr.length - 1];
				upload({
					tempName: tempName,
					tempPath: tempPath,
					tempExt: tempExt,
				}, function(response) {
					if (type == 1) {
						idcard.id_card_img_f = response.res;
						uni.showLoading({
							title: '身份证识别中'
						})
						idcardOcr(tempFilePath.tempFilePath, 'person').then((data) => {
							realForm.data.name = data.name
							realForm.data.id_no = data.idcard
							realFormRef.value.validateField("name");
							realFormRef.value.validateField("id_no");
							uni.hideLoading();
						})
					} else {
						idcard.id_card_img_b = response.res;
					}
				});
			},
			fail: () => {}
		});
	}
</script>
<style scoped lang="scss">
	.idcardImg {
		width: 360rpx;
		height: 245rpx;
		padding: 20rpx 0;
	}

	.contain {
		padding-top: 50rpx;
	}

	.face {
		width: 100%;
		height: 380rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;

		image {
			width: 180.12rpx;
			height: 180.12rpx;
			display: inline-block;
		}
	}

	.from-list {
		padding: 0 30rpx;
	}

	.success {
		text-align: center;
		display: flex;
		padding-top: 360rpx;
		flex-direction: column;
		justify-content: center;

		image {
			width: 222rpx;
			height: 222rpx;
			display: inline-block;
			margin: auto;
		}

		text {
			display: inline-block;
		}
	}
</style>